<html>

<head>
    
    <title>分享的文章</title>
    <link rel="stylesheet" href="../css/editormd.css" />
    <link rel="stylesheet" href="../css/element.css" />
    <script src="../js/jquery.min.js"></script>
    <script src="../lib/marked.min.js"></script>
    <script src="../lib/prettify.min.js"></script>
    <script src="../editormd.js"></script>
    <!-- 先引入 Vue -->
    <script src="../js/vue.js"></script>
    <script src="../js/a.js"></script>
    <script src="../js/qrcode.js"></script>
    <script src="../lib/c.js"></script>
    <!-- 引入组件库 -->
    <script src="../js/element.ui.js"></script>
    <script src="../js/crypto-js.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/leancloud-storage@3.14.1/dist/av-live-query-min.js"></script>
    <script type="text/javascript" src="../pwd/js/DigitalRain.js"></script>
    <script src="../lib/raphael.min.js"></script>
   
    <script src="../lib/flowchart.min.js"></script>
    <script src="../lib/jquery.flowchart.min.js"></script>
    <script src="../lib/sequence-diagram.min.js"></script>
    <!--单击显示文字-->
    <script type="text/javascript" src="../pwd/js/click_show_text.js"></script>

</head>

<body>
    <!-- 数字雨 -->
    <canvas id="canvas" width="1440" height="900"></canvas>
    <img id="scrolBtn" class="btn" width="50px" height="50px" src="../images/arrow_up.png" onclick="scrolUp()" style="width: 50px; height: 50px;position: absolute;z-index: 999;bottom: 150px; right: 50px;
    border-radius: 25px; box-shadow: 5px 5px 5px #888888;">
   <div id="root" style="position: absolute;width: 100%; height: 100%; top: 0;overflow: scroll">
   <div id="app">
        <div id="root_group">

            <div id="mian_view"   v-loading="loading">
                <div class="flex">
                    <h1>{{md.name}}</h1>
                    <div id="qrcode"></div>
                </div>

                <div class="flex titleCss">
                    <span class="el-icon-s-custom" style="line-height: 50px;">{{md.UserId}}</span>
                    <span class="el-icon-timer" style="line-height: 50px;">{{md.updatedAt}}</span>
                    <a class="el-icon-connection" style="line-height: 50px;" href="https://zyqing.ml/">工具由会飞的猪提供</a>
                </div>
                <div id="overMd" style="padding:10px">
                    <div id="mdOverBg"></div>
                </div>

            </div>
        </div>
    </div>
    </div>
    
    <script>
  if (!(IsPC())) {
      let data= encodeURIComponent(getQueryString('data'))
        window.location.replace("../phone/index.html#/shareMd?data="+data);
		let exception = new CommonException('检测到手机', 1);
        throw exception
    }
        var vue = new Vue({
            el: '#app',
            methods: {
                getQuery() {
                   
                    setTimeout(function () {
                        var qrcode = new QRCode(document.getElementById("qrcode"), {
                            width: 100,
                            height: 100
                        });
                        qrcode.makeCode(window.location.href);
                    }, 300)

                    let query = getQueryString('data')
                    if (query != null) {
                        getNetMd(getDAes(query))
                    }

                },

            },
            data: function () {
                return {
                    loading:true,
                    md: {
                        UserId: "未知",
                        updatedAt: "未知时间"
                    },
                    dialogVisible: true
                }
            },
            created: function () {
              
                init()
                this.getQuery()
            }
        })
        function init() {
            AV.init({
                appId: $.Encryption.Cloud.APP_ID,
                appKey: $.Encryption.Cloud.APP_KEY
            });
        }
        function getNetMd(value) {
          
            var query = new AV.Query($.Encryption.CloudTable.MdList)
            query.equalTo('objectId', value);
            query.find().then(function (data) {
                var json = JSON.parse(JSON.stringify(data));
                vue._data.loading = false
                if (json != null && json.length > 0) {
                    vue._data.md = json[0]
                    overWatchMd('overMd', json[0].data)

                } else {
                    err();
                }
             

            }, function (arg) {
                err();
            });
        }
     
        function overWatchMd(id, markdown) {

            editormd.markdownToHTML(id, {
                htmlDecode: true,
                markdown: markdown,
                emoji: true,
                taskList: true,
            });
            addWaterMarker('文章由' + vue._data.md.UserId + '编写')
        }
        function err() {
            vue.$message.error("页面已失效");
        }
        function addWaterMarker(str) {
            var can = document.createElement('canvas');
            var body = document.getElementById('mdOverBg');
            body.appendChild(can);
            can.width = 350; //画布的宽
            can.height = 300;//画布的高度
            can.style.display = 'none';
            var cans = can.getContext('2d');
            cans.rotate(-20 * Math.PI / 180); //画布里面文字的旋转角度
            cans.font = "20px Microsoft JhengHei"; //画布里面文字的字体
            cans.fillStyle = "rgba(17, 17, 17, 0.50)";//画布里面文字的颜色
            cans.textAlign = 'left'; //画布里面文字的水平位置
            cans.textBaseline = 'Middle'; //画布里面文字的垂直位置
            cans.fillText(str, can.width / 3, can.height / 2); //画布里面文字的间距比例
            body.style.backgroundImage = "url(" + can.toDataURL("image/png") + ")"; //把画布插入到body中
        }

        function scrolUp() {
            $("#root").scrollTop(0);
        }
    
    </script>
</body>
<style>
    canvas {
        position: fixed;
        right: 0px;
        bottom: 0px;
        min-width: 100%;
        min-height: 100%;
        height: auto;
        width: auto;
        z-index: -1;
    }

    #overMd {
        position: relative;
    }

    #mdOverBg {
        position: absolute;
        height: 100%;
        width: 95%;
        /* display: none; */
        top: 0;
        z-index: 9;
    }

    .tocStyle {
        position: relative;
        pointer-events: auto;
        z-index: 99;
    }
    a {
        position: relative;
        pointer-events: auto;
        z-index: 99;
    }
    #root_group {
        display: flex;
        align-items: center;
        justify-content: center
    }


    #mian_view {
        width: 60%;
        padding: 50px;
        background: rgba(255, 255, 255, 0.9);
        border-radius: 10px;
        min-width: 500px;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        margin-top: 10px;
    }

    .title {
        text-align: center;
        margin-bottom: 50px;
    }

    .flex {
        display: flex;

        width: 100%;
        flex-direction: row;
        justify-content: space-between;
    }

    .titleCss {
        line-height: 50px;
        height: 50px;
    }

    .editormd-html-preview {
        background-color: rgba(255, 255, 255, 0);
    }
    
</style>

</html>